<!--
=========================================================
* Argon Dashboard - v1.2.0
=========================================================
* Product Page: https://www.creative-tim.com/product/argon-dashboard


* Copyright  Creative Tim (http://www.creative-tim.com)
* Coded by www.creative-tim.com



=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="zh-CN" translate="no">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="referrer" content="origin">
    <link rel="canonical" href="https://github.com/Qexo/Qexo">

    <title>
        {{ QEXO_NAME }}{{ QEXO_SPLIT }}{% block title %}{% endblock %}
    </title>

    <!-- Favicon - loaded as static -->
    <link rel="shortcut icon" href="{{ QEXO_ICON }}">
    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <!-- Icons -->
    <link rel="stylesheet"
          href="{{ cdn_prev }}@creative-tim-official/argon-dashboard@2.0.4/assets/css/nucleo-icons.css"
          type="text/css">
    <link rel="stylesheet"
          href="{{ cdn_prev }}@creative-tim-official/argon-dashboard@2.0.4/assets/css/nucleo-svg.css"
          type="text/css">

    <link rel="stylesheet"
          href="{{ cdn_prev }}@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
          type="text/css">
    <!-- Page plugins -->
    <link rel="stylesheet"
          href="{{ cdn_prev }}notyf@3.10.0/notyf.min.css"
          type="text/css">
    <!-- Argon CSS -->
    <link rel="stylesheet"
          href="{{ cdn_prev }}qexo-static@2.2.3/qexo/argon/argon-dashboard.css"
          type="text/css">
    <!-- Specific CSS goes HERE -->
    {% block stylesheets %}
        <style>
        </style>
    {% endblock stylesheets %}
</head>

<body class="g-sidenav-show   bg-gray-100">
<div class="min-height-300 bg-primary position-absolute w-100"></div>

{% include "includes/sidenav.html" %}

<main class="main-content position-relative border-radius-lg ">

    {% include "includes/navigation.html" %}

    {% block content %}{% endblock content %}

</main>
<div class="fixed-plugin">
    <a class="fixed-plugin-button position-fixed px-3 py-2">
      <i class="fa fa-cog py-2"> </i>
    </a>
    <div class="card shadow-lg">
      <div class="card-header pb-0 pt-3 ">
        <div class="float-start">
          <h5 class="mt-3 mb-0">个性化</h5>
          <p>仪表盘样式配置项</p>
        </div>
        <div class="float-end mt-4">
          <button class="btn btn-link text-dark p-0 fixed-plugin-close-button">
            <i class="fa fa-close"></i>
          </button>
        </div>
        <!-- End Toggle Button -->
      </div>
      <hr class="horizontal dark my-1">
      <div class="card-body pt-sm-3 pt-0 overflow-auto">
        <!-- Sidebar Backgrounds -->
        <div>
          <h6 class="mb-0">侧边栏颜色</h6>
        </div>
        <a href="javascript:void(0)" class="switch-trigger background-color">
          <div class="badge-colors my-2 text-start">
            <span class="badge filter bg-gradient-primary active" data-color="primary" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-dark" data-color="dark" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-info" data-color="info" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-success" data-color="success" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-warning" data-color="warning" onclick="sidebarColor(this)"></span>
            <span class="badge filter bg-gradient-danger" data-color="danger" onclick="sidebarColor(this)"></span>
          </div>
        </a>
        <!-- Sidenav Type -->
        <div class="mt-3">
          <h6 class="mb-0">侧栏类型</h6>
          <p class="text-sm">在以下两种样式中选择</p>
        </div>
        <div class="d-flex">
          <button class="btn bg-gradient-primary w-100 px-3 mb-2 active me-2" data-class="bg-white" onclick="sidebarType(this)">White</button>
          <button class="btn bg-gradient-primary w-100 px-3 mb-2" data-class="bg-default" onclick="sidebarType(this)">Dark</button>
        </div>
        <p class="text-sm d-xl-none d-block mt-2">你只能在桌面端修改样式</p>
        <!-- Navbar Fixed -->
        <div class="d-flex my-3">
          <h6 class="mb-0">顶栏固定</h6>
          <div class="form-check form-switch ps-0 ms-auto my-auto">
            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed" onclick="navbarFixed(this)">
          </div>
        </div>
        <hr class="horizontal dark my-sm-4">
        <div class="mt-2 mb-5 d-flex">
          <h6 class="mb-0">浅色 / 深色</h6>
          <div class="form-check form-switch ps-0 ms-auto my-auto">
            <input class="form-check-input mt-1 ms-auto" type="checkbox" id="dark-version" onclick="darkMode(this)">
          </div>
        </div>
        <a class="btn bg-gradient-dark w-100" href="https://github.com/qexo/qexo">项目页面</a>
        <a class="btn btn-outline-dark w-100" href="https://www.oplog.cn/qexo">查看文档</a>
        <div class="w-100 text-center">
          <a class="github-button" href="https://github.com/Qexo/Qexo" data-icon="octicon-star"
             data-size="large" data-show-count="true" aria-label="Star Qexo/Qexo on GitHub">Star</a>
          <h6 class="mt-3">感谢您的Star!</h6>
          <a href="https://www.oplog.cn" class="btn btn-dark mb-0 me-2" target="_blank">
            <i class="fa-solid fa-blog me-1" aria-hidden="true"></i> Blog
          </a>
          <a href="https://github.com/Qexo/Qexo" target="_blank">
            <i class="fa-brands fa-github me-1" aria-hidden="true"></i> Github
          </a>
        </div>
      </div>
    </div>
  </div>

{% include "includes/scripts.html" %}

<!-- Specific JS goes HERE -->
{% block javascripts %}
{% endblock javascripts %}
</body>

</html>
